<!DOCTYPE html>
<html lang="zh">
  <head>
<!--
  * 作者：王光卫
  * Copyright 2020 王光卫博客 (https://www.weinotes.com)
  * Licensed under MulanPSL2 (http://license.coscl.org.cn/MulanPSL2)
 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Resume Page Template</title>
    <!-- Bootstrap -->
    <link href="../../../../Applications/MAMP/htdocs/css/bootstrap-4.3.1.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <hr>
      <div class="row">
        <div class="col-6">
          <h1>HTML5简历模板</h1>
        </div>
        <div class="col-6">
          <p class="text-right"><a href="">点击下载</a></p>
        </div>
      </div>
      <hr>
      <div class="row">
        <div class="col-md-8 col-sm-12">
          <div class="media">
            <img class="mr-3" src="../../../../Applications/MAMP/htdocs/images/115X115.gif" alt="Generic placeholder image">
            <div class="media-body">
              <h5 class="mt-0">网站开发</h5>
              10年网站开发经验，擅长PHP、 Java、JavaScript、python等
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-12">
          <div class="row justify-content-md-around m-1">
            <address>
              <strong>我的名字</strong><br>
              地址：中国上海<br>
              邮编：123456<br>
              <abbr title="Phone">P:</abbr>021-1234567<br>
              <a href="mailto:#">my@example.com</a>
            </address>
          </div>
        </div>
      </div>
      <hr>
      <div class="row">
        <div class="col-md-6 col-sm-12">
          <h2>教育背景</h2>
          <hr>
          <div class="row">
            <div class="col-6">
              <h4>清华大学</h4>
            </div>
            <div class="col-6">
              <h5 class="text-right"><span aria-hidden="true"></span> Jan 2002 - Dec 2006</h5>
            </div>
          </div>
          <h5><span class="badge badge-secondary">Bachelors</span></h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
          <div class="row">
            <div class="col-6">
              <h4>University of Web Design</h4>
            </div>
            <div class="col-6">
              <h5 class="text-right"><span aria-hidden="true"></span> Jan 2007 - Dec 2008</h5>
            </div>
          </div>
          <h5><span class="badge badge-secondary">Masters</span></h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
        </div>
        <div class="col-md-6 col-sm-12">
          <h2>Skill Set</h2>
          <hr>
          <div class="progress mt-4">
            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%"> HTML</div>
          </div>
          <div class="progress mt-4">
            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> CSS</div>
          </div>
          <div class="progress mt-4">
            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%"> JAVASCRIPT</div>
          </div>
          <div class="progress mt-4">
            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> PHP</div>
          </div>
          <div class="progress mt-4">
            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%"> WORDPRESS</div>
          </div>
          <div class="progress mt-4">
            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> PHOTOSHOP</div>
          </div>
          <div class="progress mt-4">
            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> ILLUSTRATOR</div>
          </div>
        </div>
      </div>
      <hr>
      <h2>Work Experience</h2>
      <hr>
      <div class="row">
        <div class="col-md-6 col-sm-12">
          <div class="row">
            <div class="col-5">
              <h4>ABC Corp.</h4>
            </div>
            <div class="col-6">
              <h5 class="text-right"><span aria-hidden="true"></span> Jan 2002 - Dec 2006</h5>
            </div>
          </div>
          <h5><span class="badge badge-secondary">Web Developer</span></h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
          <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet, consectetur.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
          </ul>
        </div>
        <div class="col-md-6 col-sm-12">
          <div class="row">
            <div class="col-5">
              <h4>XYZ Corp.</h4>
            </div>
            <div class="col-6">
              <h5 class="text-right"><span aria-hidden="true"></span> Jan 2002 - Dec 2006</h5>
            </div>
          </div>
          <h5><span class="badge badge-secondary">Senior Web Developer</span></h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
          <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet, consectetur.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
          </ul>
        </div>
      </div>
      <hr>
      <h2>Portfolio</h2>
      <hr>
      <div class="container">
        <div class="row text-center">
          <div class="col-sm-4 col-12 p-0"><img class="img-thumbnail"  src="../../../../Applications/MAMP/htdocs/images/300X200.gif" alt=""></div>
          <div class="col-sm-4 col-12 p-0"><img class="img-thumbnail"  src="../../../../Applications/MAMP/htdocs/images/300X200.gif" alt=""></div>
          <div class="col-sm-4 col-12 p-0"><img class="img-thumbnail"  src="../../../../Applications/MAMP/htdocs/images/300X200.gif" alt=""></div>
        </div>
        <div class="row text-center">
          <div class="col-sm-4 col-12 p-0"><img class="img-thumbnail"  src="../../../../Applications/MAMP/htdocs/images/300X200.gif" alt=""></div>
          <div class="col-sm-4 col-12 p-0"><img class="img-thumbnail"  src="../../../../Applications/MAMP/htdocs/images/300X200.gif" alt=""></div>
          <div class="col-sm-4 col-12 p-0"><img class="img-thumbnail"  src="../../../../Applications/MAMP/htdocs/images/300X200.gif" alt=""></div>
        </div>
      </div>
      <hr>
      <h2>Contact</h2>
      <hr>
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8  col-12 jumbotron">
            <form>
              <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="Name">
              </div>
              <div class="form-group">
                <label for="email">E-Mail</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="Email Address" aria-describedby="emailHelp">
                <span id="emailHelp" class="form-text text-muted" style="display: none;">Please enter a valid e-mail address.</span>
              </div>
              <div class="form-group">
                <label for="message">Message</label>
                <textarea rows="10" cols="100" class="form-control" id="message" name="message" placeholder="Message" aria-describedby="messageHelp"></textarea>
                <span id="messageHelp" class="form-text text-muted" style="display: none;">Please enter a message.</span>
              </div>
              <div class="text-center">
                <button type="submit" class="btn btn-primary">Submit</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <hr>
      <footer class="text-center">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>Copyright © 王光卫博客. All rights reserved.</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../../../Applications/MAMP/htdocs/js/jquery-3.3.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../../../../Applications/MAMP/htdocs/js/popper.min.js"></script>
    <script src="../../../../Applications/MAMP/htdocs/js/bootstrap-4.3.1.js"></script>
  </body>
</html>